<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	var formUrl = "save.act?ajax=1";
	var validateConfig = {
		rules : {
			password : {
				minlength : 6
			},
			phoneNumber : {
				minlength : 7
			},
			confirm_password : {
				minlength : 6,
				equalTo : "[name='password']"
			}
		},
		messages : {
			password : {
				required : "请输入您的密码",
				minlength : "密码必须6个字符以上"
			},
			phoneNumber : {
				minlength : "联系号码不能少于7个字符"
			},
			confirm_password : {
				required : "请再次输入密码",
				minlength : "密码必须6个字符以上",
				equalTo : "两次输入的密码不一致"
			},
			email : "请输入正确的E-mail地址"
		}
	};
	
	function beforOnSubmit(form) {
		$("#rightPower option").each(function () {
			//alert($(this).val());
			$("#hiddenPower").prepend("<input name='powerSet' type='text' value='"+$(this).val()+"'>");
		});
		return onSubmit(form);
	}
</script>
<%@include file="/WEB-INF/jsp/hadmin/addHeader.jsp"%>
</head>
<body class="gray-bg">
	<div class="row wrapper border-bottom white-bg page-heading">
		<div class="col-sm-10">
			<form method="post" onsubmit="return beforOnSubmit(this);"
				class="form-horizontal m-t" id="${actionID }Form">
				<div class="hidden" id="hiddenPower">
				powerSet
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">角色名称：</label>
					<div class="col-sm-8">
						<input required name="name" class="form-control" type="text">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">角色描述：</label>
					<div class="col-sm-8">
						<input maxlength="30" name="description" class="form-control" type="text"
							class="valid">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">权限：</label>
					<div class="col-sm-4">
						<span>待分配权限</span>
						<input placeholder="角色名" name="" id="leftPowerSearch" class="form-control" type="text" autocomplete="off">
						<button type="button"
							class="btn moveall btn-white btn-bold btn-info" id="leftPowerRemove" style="width:100%" title="Move all">
							<i class="glyphicon glyphicon-arrow-right"></i> <i
								class="glyphicon glyphicon-arrow-right"></i>
						</button>
						<select style="min-height: 200px;" id="leftPower"
							class="form-control" size="10">
							<c:forEach items="${userPowers}" var="item" varStatus="status">
								<option value="${item.name}">${item.name}</option>
							</c:forEach>
						</select>
					</div>
					<div class="col-sm-4">
						<span>已拥有权限</span>
						<input placeholder="角色名" id="rightPowerSearch" class="form-control" type="text">
						<button type="button"
							class="btn moveall btn-white btn-bold btn-info" id="rightPowerRemove" style="width:100%" title="Move all">
							<i class="glyphicon glyphicon-arrow-left"></i>
							<i class="glyphicon glyphicon-arrow-left"></i>
						</button>
						<select style="min-height:200px;" class="form-control" id="rightPower" size="10">
							
						</select>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-8 col-sm-offset-3">
						<button class="btn btn-primary" type="submit">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<%@include file="/WEB-INF/jsp/hadmin/include/validateForm.jsp"%>
	<script type="text/javascript">
	var to = false;
	$('#leftPowerSearch').keyup(function() {
		if (to) {
			clearTimeout(to);
		}
		to = setTimeout(function() {
			if($("#leftPowerSearch").val() && $("#leftPowerSearch").val()!=''){
				$("#leftPower option").each(function () {
					if($(this).val().indexOf($("#leftPowerSearch").val())<=-1){
						$(this).attr("class","hidden");
					}else{
						$(this).removeClass("hidden");
					}
				});
			}else{
				$("#leftPower option").each(function () {
					$(this).removeClass("hidden");
				});
			}
		}, 0);
	});
	$('#rightPowerSearch').keyup(function() {
		if (to) {
			clearTimeout(to);
		}
		to = setTimeout(function() {
			if($("#rightPowerSearch").val() && $("#rightPowerSearch").val()!=''){
				$("#rightPower option").each(function () {
					if($(this).val().indexOf($("#rightPowerSearch").val())<=-1){
						$(this).attr("class","hidden");
					}
				});
			}else{
				$("#rightPower option").each(function () {
					$(this).removeClass("hidden");
				});
			}
		}, 0);
	});
	
	$("#leftPower").click(function () {
		var selectLeft = $("#leftPower").find("option:selected");
		var txt = selectLeft.val();
		if(txt && txt!=''){
			$("#rightPower").append("<option value='"+txt+"'>"+txt+"</option>");
			selectLeft.remove();
			return false;
		}
	});
	$("#rightPower").click(function () {
		var selectLeft = $("#rightPower").find("option:selected");
		var txt = selectLeft.val();
		if(txt && txt!=''){
			$("#leftPower").append("<option value='"+txt+"'>"+txt+"</option>");
			selectLeft.remove();
			return false;
		}
	});
	
	$("#leftPowerRemove").click(function () {
		$("#leftPower option").each(function () {
			if(!$(this).hasClass("hidden")){
				var txt = $(this).val();
				if(txt && txt!=''){
					$("#rightPower").append("<option value='"+txt+"'>"+txt+"</option>");
					$(this).remove();
				}
			}
		});
	});
	$("#rightPowerRemove").click(function () {
		$("#rightPower option").each(function () {
			if(!$(this).hasClass("hidden")){
				var txt = $(this).val();
				if(txt && txt!=''){
					$("#leftPower").append("<option value='"+txt+"'>"+txt+"</option>");
					$(this).remove();
				}
			}
		});
	});
	
	</script>
</body>

</html>
